<template>

  <div style="min-height: 100vh">

    <!-- <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button> -->

    <a-menu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
    >

      <!-- <a-menu-item key="1">
        <a-icon type="user" />
        <span>Option 1</span>
      </a-menu-item>
      <a-menu-item key="2">
        <a-icon type="desktop" />
        <span>Option 2</span>
      </a-menu-item>
      <a-menu-item key="3">
        <a-icon type="phone" />
        <span>Option 3</span>
      </a-menu-item> -->
      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="mail" /><span>用户管理</span></span>
        <a-menu-item key="4">
          <router-link :to="'/UserAddRole'">给当前用户添加角色</router-link>
        </a-menu-item>
        <a-menu-item key="5">
          <router-link :to="'/User'">权限管理</router-link>
        </a-menu-item>
        <a-menu-item key="6">
          <router-link :to="'/AddRole'">添加角色</router-link>
        </a-menu-item>
        <a-menu-item key="7">
          <router-link :to="'/ShowRole'">展示角色</router-link>
        </a-menu-item>
        <a-menu-item key="8">
          <router-link :to="'/Addoath'">添加权限</router-link>
        </a-menu-item>
        <a-menu-item key="9">
          <router-link :to="'/ShowRole'">角色解绑</router-link>
        </a-menu-item>
        <a-menu-item key="10">
          <router-link :to="'/ShowRole'">权限解绑</router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
        <a-menu-item key="9">
          Option 9
        </a-menu-item>
        <a-menu-item key="10">
          Option 10
        </a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="11">
            Option 11
          </a-menu-item>
          <a-menu-item key="12">
            Option 12
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>

  </div>
</template>

<script>
import Home from '@/Home/Home'
export default {

  data() {
    return {
      collapsed: false,
    };
  },

  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
  },
};
</script>
